<template>
	<view class="container">
		<!-- 头部导航栏 -->
		<u-toast ref="uToast" />
		<view class="navigateBar" :style="{height:navigate_height}">
			<view class="title">
				<image src="../../static/tupian117.png" mode="widthFix" @click="back"></image>
				<text>我的课表</text>
			</view>
			<view class="top">
				<view class="topBox">
					<view v-for="(topItem,topIndex) of class_list" :key="topIndex" :data-name="topIndex"
						@click="changeIndex" :class="[activeIndex==topIndex?'con':'']">
						<text></text>
						{{topItem}}
					</view>
				</view>
			</view>
			<view class="semester" :id="[activeIndex==1?'active':'']">
				<text>2019-2020学年上学期</text>
				<text>(第12周)</text>
				<text></text>
			</view>
		</view>
		<view class="" v-show="activeIndex==0">
			<view class="list" :style="{marginTop:navigate_height}">
				<!-- 每周 -->
				<view class="week">
					<view class="per_day" v-for="(item,index) in weekList" :key="index">
						<text>{{item.name}}</text>
						<text></text>
					</view>
				</view>
				<!-- 学生课程表 -->
				<view class="curriculum" v-for="(item,index) in class_arr" :key="index"
					:style="{height:count_height(class_arr[index].children.length)}">
					<view class="left_curriculum" :style="{height:count_height(class_arr[index].children.length)}">
						<text :style="{marginTop:margin_height(class_arr[index].children.length)}">{{item.name}}</text>
					</view>
					<view class="right_curriculum">
						<view class="period" v-for="(i,j) in class_arr[index].children" :key="j">
							<view class="" v-for="(m,n) in subject_list" :key="n">
								<text>{{render_data(i.id,m)}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 同学信息 -->
		<view class="" v-show="activeIndex==1">
			<view class="classmateInfo" :style="{marginTop:navigate_height}">
				<view class="classInfo">
					<text>{{class_name}}同学信息</text>
				</view>
				<view class="register">
					<text>学号</text>
					<text>姓名</text>
					<text>性别</text>
				</view>
				<view class="classmateList">
					<view class="" v-for="(item,index) in studentList" :key="index">
						<text class="left">{{item.nation_license}}</text>
						<view class="center">
							<image :src="item.avatar_img" mode="widthFix"></image>
							<text>{{item.full_name}}</text>
						</view>
						<view class="right">
							<text>{{$gender(item.gender,1)}}</text>
							<image :src="$gender(item.gender,2)" mode="widthFix"></image>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import request from '../../request.js'
	export default {
		data() {
			return {
				class_list: ['课表', '学生情况'],
				activeIndex: 0,
				class_name: '',
				navigate_height: '275rpx',
				class_arr: [],
				classId: '',
				student_list: [],
				week_list: [], //周列表
				subject_list: [], //用来记录数据
			}
		},
		onLoad(option) {
			if (option) {
				this.classId = option.id;
				this.class_name = option.class;
			}
			this.classesStudent();
			this.intervalLists();
			this.weekLists();
			this.classesCourse(); //获取的是课程
		},
		computed: {
			//这里获取的是学生的情况
			studentList() {
				if (this.student_list) {
					return this.student_list;
				} else {
					return [];
				}
			},
			//这里获取的是周列表
			weekList() {
				if (this.week_list) {
					this.week_list.unshift({
						name: '二月',
						week_id: ''
					})
					return this.week_list;
				} else {
					return [];
				}
			}
		},
		methods: {
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			//计算高度
			count_height(param) {
				let num = '';
				switch (param) {
					case 1:
						num = (71 * param);
						num = `${num}rpx`;
						break;
					case 3:
						num = (71 * param) - 2;
						num = `${num}rpx`;
						break;
					case 4:
						num = (71 * param) - 3;
						num = `${num}rpx`;
						break;
					case 5:
						num = (71 * param) - 4;
						num = `${num}rpx`;
						break;
				}
				return num;
			},
			//距离顶部的高度
			margin_height(param) {
				let num = '';
				switch (param) {
					case 1:
						num = 22;
						num = `${num}rpx`;
						break;
					case 3:
						num = 119;
						num = `${num}rpx`;
						break;
					case 4:
						num = 190;
						num = `${num}rpx`;
						break;
					case 5:
						num = 190;
						num = `${num}rpx`;
						break;
				}
				return num;
			},
			//渲染数据到页面
			render_data(param1, param2) {
				let arr = [];
				let str = '';
				if (param2.children.length > 0) {
					arr = param2.children;
					for (let i = 0; i < arr.length; i++) {
						if (param1 == arr[i].id) {
							str = arr[i].name;
						} else {
							str = '';
						}
					}
				} else {
					str = '';
				}
				return str;
			},
			//页面进行切换
			changeIndex(e) {
				console.log(e.currentTarget.dataset.name);
				let index = e.currentTarget.dataset.name;
				this.activeIndex = index;
				if (this.activeIndex == 1) {
					this.navigate_height = '185rpx';
				} else {
					this.navigate_height = '275rpx';
				}
			},
			//这里是获取老师的列表
			classesStudent() {
				let base_url = uni.getStorageSync('host');
				console.log(base_url);
				let _this = this;
				request({
					url: base_url + 'teacher/classes/classesStudent',
					method: 'post',
					data: {
						classes_id: this.classId ? this.classId : 15
					},
					success(res) {
						if (res.statusCode == 200) {
							console.log(res.data.data);
							_this.student_list = res.data.data;
						} else {
							_this.$refs.uToast.show({
								title: res.data.message || '系统错误',
								type: 'warning',
							})
						}

					}
				})
			},
			//获取的是具体的科目
			classesCourse() {
				let base_url = uni.getStorageSync('host');
				console.log(base_url);
				let _this = this;
				request({
					url: base_url + 'teacher/classes/classesCourse',
					method: 'post',
					data: {
						classes_id: this.classId ? this.classId : 15
					},
					success(res) {
						if (res.statusCode == 200) {
							let arr = [];
							console.log(res.data.data);
							arr = res.data.data;
							console.log(_this.week_list);
							console.log(_this.subject_list);
							for (let i = 0; i < _this.subject_list.length; i++) {
								for (let j = 0; j < arr.length; j++) {
									if (_this.subject_list[i].id == arr[j].week_id) {
										_this.subject_list[i].children.push({
											id: arr[j].interval_id,
											name: arr[j].subject_info ? arr[j].subject_info.name : '',
										})
									}
								}
							}
							console.log(_this.subject_list);
						} else {
							_this.$refs.uToast.show({
								title: res.data.message || '系统错误',
								type: 'warning',
							})
						}
					}
				})
			},
			//获取科目
			intervalLists() {
				let base_url = uni.getStorageSync('host');
				console.log(base_url);
				let _this = this;
				request({
					url: base_url + 'management/interval/lists',
					method: 'post',
					success(res) {
						if (res.statusCode == 200) {
							let study_arr = res.data.data;
							let norepeat_arr = [];
							console.log(res.data.data);
							let arr = study_arr.map(item => {
								return item.section;
							})
							norepeat_arr = [...new Set(arr)];
							console.log(norepeat_arr);
							norepeat_arr.forEach(item => {
								_this.class_arr.push({
									name: item,
									children: [],
								})
							})

							console.log(_this.class_arr);
							for (let i = 0; i < _this.class_arr.length; i++) {
								for (let j = 0; j < study_arr.length; j++) {
									if (_this.class_arr[i].name == study_arr[j].section) {
										_this.class_arr[i].children.push({
											id: study_arr[j].interval_id,
											subject_name: study_arr[j].name,
										})
									}
								}

							}
							console.log(_this.class_arr); //这里面获取的是课程列表
						} else {
							_this.$refs.uToast.show({
								title: res.data.message || '系统错误',
								type: 'warning',
							})
						}

					}
				})
			},
			//获取的是周
			weekLists() {
				let base_url = uni.getStorageSync('host');
				console.log(base_url);
				let _this = this;
				request({
					url: base_url + 'management/week/lists',
					method: 'post',
					success(res) {
						if (res.statusCode == 200) {
							let arr = [];
							arr = res.data.data;
							_this.week_list = res.data.data;
							console.log(_this.week_list);
							console.log(arr, '触发了吗这行代码');
							for (let i = 0; i < arr.length; i++) {
								_this.subject_list.push({
									id: arr[i].week_id,
									children: []
								})
							}
							console.log(_this.subject_list);
						} else {
							_this.$refs.uToast.show({
								title: res.data.message || '系统错误',
								type: 'warning',
							})
						}

					}
				})
			},
		},
	}
</script>

<style lang="scss">
	.container {
		width: 100%;
		overflow: hidden;

		.navigateBar {
			width: 100%;
			position: fixed;
			top: 0;
			height: 275rpx;
			background: linear-gradient(to right, #2C78FE, #32B0FF);

			.title {
				width: 100%;
				display: flex;
				justify-content: flex-start;
				height: 120rpx;

				image {
					margin-top: 52rpx;

					&:nth-child(1) {
						width: 20rpx;
						margin-left: 20rpx;
					}
				}

				text {
					&:nth-child(2) {
						margin-top: 50rpx;
						color: #fff;
						margin-left: 270rpx;
						font-size: 32rpx;
					}
				}


			}

			.top {
				width: 100%;
				height: 65rpx;
				overflow: hidden;

				.topBox {
					width: 100%;
					height: 65rpx;
					position: relative;
					display: flex;
					justify-content: space-evenly;

					view {
						height: 65rpx;
						line-height: 65rpx;
						width: 120rpx;
						text-align: center;
						font-size: 30rpx;
						color: #fff;

						text {
							display: none;
						}


					}

					.con {
						position: relative;
						height: 65rpx;
						line-height: 65rpx;
						color: #fff;
						width: 120rpx;

						text {
							display: block !important;
							position: absolute;
							width: 120rpx;
							height: 4rpx;
							background: #fff;
							bottom: 0rpx;
							left: 0rpx;
						}
					}

				}
			}

			.semester {
				width: 100%;
				height: 90rpx;
				display: block;
				display: flex;
				justify-content: flex-start;

				text {
					color: #fff;
					font-size: 30rpx;
					margin-top: 30rpx;

					&:nth-child(1) {
						width: 350rpx;
						margin-left: 110rpx;
					}

					&:nth-child(2) {
						width: 130rpx;
					}

					&:nth-child(3) {
						width: 0rpx;
						margin-top: 45rpx;
						margin-left: 20rpx;
						height: 0rpx;
						border-width: 15rpx 15rpx 15rpx 15rpx;
						border-color: #fff transparent transparent transparent;
						border-style: solid;
					}
				}

			}

			#active {
				width: 100%;
				height: 90rpx;
				display: flex;
				justify-content: flex-start;
				display: none;

				text {
					color: #fff;
					font-size: 30rpx;
					margin-top: 30rpx;

					&:nth-child(1) {
						width: 350rpx;
						margin-left: 110rpx;
					}

					&:nth-child(2) {
						width: 130rpx;
					}

					&:nth-child(3) {
						width: 0rpx;
						margin-top: 45rpx;
						margin-left: 20rpx;
						height: 0rpx;
						border-width: 15rpx 15rpx 15rpx 15rpx;
						border-color: #fff transparent transparent transparent;
						border-style: solid;
					}
				}

			}
		}

		.list {
			width: 100%;
			margin-top: 275rpx;

			.week {
				width: 100%;
				height: 110rpx;
				display: flex;
				background: #F2F2F2;
				justify-content: flex-start;

				.per_day {
					height: 110rpx;
					box-sizing: border-box;
					border-right: 1rpx solid #ccc;

					&:nth-child(n+1) {
						width: 94rpx;
						display: flex;
						flex-wrap: wrap;
						justify-content: flex-start;

						text {
							&:nth-child(1) {
								width: 100%;
								height: 32rpx;
								font-size: 30rpx;
								color: #333333;
								text-align: center;
								margin-top: 18rpx;
							}

							&:nth-child(2) {
								width: 100%;
								margin-top: 2rpx;
								text-align: center;
								font-size: 24rpx;
								color: #666666;
								height: 26rpx;
							}
						}

					}

					&:nth-child(1) {
						width: 90rpx;
						border-right: none;
						display: flex;
						justify-content: center;

						text {
							&:nth-child(1) {
								margin-top: 35rpx !important;
								color: #e55445;
								font-size: 30rpx;
							}
						}
					}

					&:nth-child(3) {
						background: #a0bcf2;

						text {
							&:nth-child(1) {
								color: #fff;
							}

							&:nth-child(2) {
								color: #fff;
							}

						}
					}

					&:last-child {
						border-right: none;
					}
				}
			}

			.curriculum {
				width: 100%;
				height: 281rpx;
				display: flex;
				justify-content: flex-start;
				border-bottom: 1rpx solid #ccc;

				.left_curriculum {
					width: 90rpx;
					height: 281rpx;
					background: #F2F2F2;
					display: flex;
					justify-content: center;
					border-bottom: 1rpx solid #ccc;

					text {
						&:nth-child(1) {
							color: #666666;
							font-size: 26rpx;
							margin-top: 190rpx;
						}
					}
				}

				.right_curriculum {
					width: 660rpx;

					.period {
						width: 100%;
						height: 71rpx;
						border-bottom: 1rpx solid #ccc;
						display: flex;
						justify-content: flex-start;

						view {
							width: 94rpx;
							height: 71rpx;
							box-sizing: border-box;
							border-right: 1rpx solid #ccc;
							display: flex;
							justify-content: flex-start;

							text {
								&:nth-child(1) {
									width: 93rpx;
									height: 71rpx;
									text-align: center;
									line-height: 71rpx;
									font-size: 26rpx;
									color: #333333;
								}
							}

							&:last-child {
								border-right: none;
							}

						}

						#mondayFirstPeriod {
							background: #fec566;
							border-bottom-left-radius: 12rpx;
							border-bottom-right-radius: 12rpx;
						}

						#tuesdayFirstPeriod {
							background: #ff586c;
							border-bottom-left-radius: 12rpx;
							border-bottom-right-radius: 12rpx;

							text {
								&:nth-child(1) {
									color: #fff;
								}
							}
						}

					}
				}

			}
		}

		.classmateInfo {
			width: 100%;
			overflow: hidden;

			.classInfo {
				width: 710rpx;
				margin-left: 20rpx;
				display: flex;
				height: 75rpx;
				justify-content: center;
				align-items: center;
				border-bottom: 1rpx solid #F2F2F2;

				text {
					&:nth-child(1) {
						color: #333333;
						font-size: 30rpx;
					}
				}
			}

			.register {
				width: 710rpx;
				margin-left: 20rpx;
				height: 87rpx;
				display: flex;
				justify-content: flex-start;
				align-items: center;
				border-bottom: 1rpx solid #F2F2F2;

				text {
					color: #333333;
					font-size: 30rpx;

					&:nth-child(2) {
						margin-left: 270rpx;
					}

					&:nth-child(3) {
						margin-left: 210rpx;
					}
				}
			}

			.classmateList {
				width: 710rpx;
				margin-left: 20rpx;

				view {
					width: 100%;
					height: 100rpx;
					display: flex;
					justify-content: flex-start;
					align-items: center;
					border-bottom: 1rpx solid #F2F2F2;

					.left {
						color: #333333;
						font-size: 30rpx;
						width: 265rpx;
					}

					.center {
						width: 325rpx;
						display: flex;
						justify-content: flex-start;
						align-items: center;
						height: 80rpx;
						border-bottom: none;

						image {
							&:nth-child(1) {
								width: 60rpx;
							}
						}

						text {
							&:nth-child(2) {
								color: #333333;
								font-size: 30rpx;
								margin-left: 15rpx;
							}
						}
					}

					.right {
						width: 120rpx;
						display: flex;
						justify-content: flex-start;
						align-items: center;
						height: 40rpx;

						text {
							&:nth-child(1) {
								color: #333333;
								font-size: 30rpx;
							}
						}

						image {
							&:nth-child(2) {
								width: 30rpx;
								margin-left: 15rpx;
							}
						}
					}
				}
			}
		}
	}
</style>
